<template>
  <view class="waybill_contain">
    <nut-tabs v-model="tab1value" name="tab4value" @change="doChange" :background="'#fff'">
      <nut-tab-pane title="寄货" :pane-key="1">
        <headerSearch :query="query" @quryList="quryList" @search="search"></headerSearch>
        <scroll-view :scroll-y="true" class="search_list" @scrolltolower="handleScroll" v-if="showList.length>0">
          <template v-for="(item, index) in showList">
            <ListItem :item="item" class="item" @click="gotoPage(item)" @showTel="showTel" />
          </template>
        </scroll-view>
        <view class="container_empty" v-else>
          <image mode="aspectFit" src="../../assets/images/index/empty3.png"></image>
          <view class="empty_text">暂无可追踪的货物信息</view>
        </view>
      </nut-tab-pane>
      <nut-tab-pane title="收货" :pane-key="2">
        <headerSearch :query="query" @quryList="quryList" @search="search"></headerSearch>
<!--        <nut-list class="search_list" :height="156" :listData="showList" @scroll-bottom="handleScroll" v-if="showList.length>0">-->
<!--          <template v-slot="{ item, index }">-->
<!--            <ListItem :item="item" class="item" @click="gotoPage(item)" @showTel="showTel" />-->
<!--          </template>-->
<!--        </nut-list>-->
        <scroll-view :scroll-y="true" class="search_list" @scrolltolower="handleScroll" v-if="showList.length>0">
          <template v-for="(item, index) in showList">
            <ListItem :item="item" class="item" @click="gotoPage(item)" @showTel="showTel" />
          </template>
        </scroll-view>
        <view class="container_empty" v-else>
          <image mode="aspectFit" src="../../assets/images/index/empty3.png"></image>
          <view class="empty_text">暂无可追踪的货物信息</view>
        </view>
      </nut-tab-pane>
    </nut-tabs>
    <drawer :show="showTelPopup" :show-border="false" :title="'拨打电话'" @close="closeTel" :show-close="true">
      <view class="telbox">
        <view class="telrow" :class="{active:telSelected==index}" @click="changeTel(index)" v-for="(item,index) in telList">网点电话 {{item}}</view>
        <view class="telrow" :class="{active:telSelected==99}" @click="changeTel(99)">盛辉客服 95299</view>
      </view>
      <view class="save">
        <view class="btn" @click="handleDial">
          <image src="../../assets/images/orderTracking/dial.png"></image>
          <text>拨打电话</text>
        </view>
      </view>
    </drawer>
  </view>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { OrderListType } from "./listType";
// import { WorkerOrderOrderListParam, getByCustomer } from "@/@api/home";
import {getOrderTrackingList, orderList} from "@/@api/orderTracking";
import ListItem from "./ListItem.vue";
import useUserStore from "@/store/user";
import useUserInfoStore from "../../store/user";
import useMyOrderStore from "@/store/myOrder";
import headerSearch from "@/pages/orderTracking/headerSearch.vue";
import { useDidShow } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import {$post} from "@/@api";
const userStore = useUserInfoStore();
const props = defineProps<{
  keywords: string;
}>();
const order = useMyOrderStore();
const showTelPopup = ref<boolean>(false)
const telSelected = ref<number>(99)
async function gotoPage(item) {
  let res: any = await $post(
      "/selfmachine-system/order/list",
      {
        billNo: item.billNo,
        pickRecord: item.wxStatus==6
      }
  )
  order.orderList = res.data.rows[0]
  Taro.navigateTo({
    url: "/pages/myOrder/order",
  });
}
//搜索参数
const searchValue = ref<string>("");
const tab1value = ref(1);
const store = useUserStore();
const loading = ref(false);
const formList = ref<OrderListType[]>([]);
const total = ref<number>(0)

// 懒加载参数
const list = ref<OrderListType[]>([]);

const params = ref({
  pageNum: 1,
  pageSize: 10,
});

const query = ref({
  keywords: "",
  wxStatus: "",
  start: "",
  end: "",
});

// watch(() => props.keywords, () => {
//     query.value.keywords = props.keywords
//     initList()
// }, { immediate: true })


//网点电话弹窗
const telList = ref([])
const showTel = async (item:any)=>{
  if(!item.tel){
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
  else{
    let str = item.tel
    if(str.indexOf('/')!==-1){
      telList.value = str.split('/')
    }
    else if(str.indexOf(';')!==-1){
      telList.value = str.split(';')
    }
    else if(str.indexOf('；')!==-1){
      telList.value = str.split('；')
    }
    else if(str.indexOf('、')!==-1){
      telList.value = str.split('、')
    }
    else if(str.indexOf(' ')!==-1){
      telList.value = str.split(' ')
    }
    else{
      telList.value = [str]
    }
    telSelected.value = 0
    showTelPopup.value = true
  }
}
const closeTel = ()=>{
  showTelPopup.value = false
}
const changeTel = (type)=>{
  telSelected.value = type
}
const handleDial = ()=>{
  Taro.makePhoneCall({
    phoneNumber: telList.value[telSelected.value].replace(/[^0-9]/ig,'')
  })
}

const handleScroll = ()=> {
  if ((list.value.length < total.value) && !loading.value) {
    loading.value = true
    onLoadList()
  }
}

function quryList(item) {
  query.value.start = item.start;
  query.value.end = item.end;
  query.value.wxStatus = item.wxStatus;
  params.value = {
    pageNum: 1,
    pageSize: 10,
  };
  total.value = 0
  initList();
}
//搜索
function search(keywords: string) {
  query.value.keywords = keywords;
  params.value = {
    pageNum: 1,
    pageSize: 10,
  };
  total.value = 0
  list.value = []
  formList.value = []
  initList();
}
useDidShow(() => {
  total.value = 0
  list.value = []
  formList.value = []
  initList();
});

// 初始化列表
async function initList() {
  let postData:any = {
    customerCode: userStore.userInfo.customerCode,
    wxStatus: query.value.wxStatus,
    startBillingTime: query.value.start,
    endBillingTime: query.value.end,
    flag: tab1value.value,
    keywords: query.value.keywords,
    //ispopuppickup:false
  }
  if(tab1value.value==1){
    postData.shipperMobile = userStore.userInfo.phone
    postData.receiverMobile = ''
  }
  else if(tab1value.value==2) {
    postData.receiverMobile = userStore.userInfo.phone
    postData.shipperMobile = ''
  }
  Taro.showLoading({
    title: '查询中'
  })
  const res: any = await getOrderTrackingList(
      postData,
      params.value.pageNum,
      params.value.pageSize
  );
  Taro.hideLoading()

  if (res.data.code == 200) {
    list.value = setStatusVal([...list.value, ...res.data.rows]);
    total.value = res.data.total || 0
    formList.value = list.value;
    loading.value = false;
  }
}

// 懒加载
async function onLoadList() {
  loading.value = true;
  params.value.pageNum++;
  initList();
}
// 添加状态标签
function setStatusVal(obj: OrderListType[]): OrderListType[] {
  let arr = obj.map((item: OrderListType) => {
    let str = ""; //statusFilter(item.wxStatus, item.status, item.isExamine, item.billNo)

    if (item.wxStatus == 1) {
      str = "待审核";
    } else if (item.wxStatus == 2) {
      str = "待支付";
    } else if (item.wxStatus == 3) {
      str = "未发货";
    } else if (item.wxStatus == 4) {
      str = "运输中";
    } else if (item.wxStatus == 5) {
      str = "待签收";
    } else if (item.wxStatus == 6) {
      str = "已完成";
    } else {
      str = statusFilter(
          item.wxStatus,
          item.status,
          item.isExamine,
          item.billNo
      );
    }

    return {
      ...item,
      statusVal: str,
    };
  });
  return arr;
}
// 状态标签判断
function statusFilter(
    wxStatus: number,
    status: number,
    isExamine: number,
    billNo: string
) {
  if (isExamine == 1 && wxStatus != 1 && billNo) {
    return "待审核";
  } else if (wxStatus == 2) {
    if ([4, 5, 6, 7].includes(status)) {
      return "待签收";
    } else {
      return "待支付";
    }
  } else if (wxStatus == 3) {
    return "未发货";
  } else if (wxStatus == 4) {
    return "运输中";
  } else if (wxStatus == 5) {
    return "待签收";
  } else if (wxStatus == 6) {
    return "已完成";
  } else {
    return "其他";
  }
}
// 筛选其他数据
const showList = computed(() => {
  return formList.value;
});

// tab改变
function doChange({ paneKey }) {
  // 初始化
  params.value = {
    pageNum: 1,
    pageSize: 10,
  };
  //query.value.flag = paneKey;
  list.value = [];
  formList.value = []
  total.value = 0
  initList();
}
</script>

<style lang="scss">
page {
  --nut-tabs-horizontal-tab-line-color: #0966ff;
  --nut-tabs-titles-item-active-color: #0966ff;
}
.waybill_contain {
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;

  .nut-tab-pane {
    padding: 0;
  }

  .search_list {
    // height: 50rpx !important;
    overflow: auto;
    padding: 0 24rpx 24rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;
    height: calc(100vh - 200rpx);

    .item {
      width: 700rpx;
      height: 436rpx;
      background-color: #fff;
      margin-top: 24rpx;
      border-radius: 10rpx;
      // padding-top: 20rpx;
    }
  }
}
.telbox {
  width: 100%;
  margin-top: 72rpx;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 0 24rpx;
  box-sizing: border-box;
  .telrow {
    width: 100%;
    border-top: 1rpx solid #f0f0f0;
    text-align: center;
    line-height: 72rpx;
    font-size: 28rpx;
    color: #999;
    &.active {
      font-size: 32rpx;
      color: #3091ff;
    }
  }
}
.save {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 32rpx 24rpx 20rpx;
  .btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 16rpx;
    }
  }
}
.container_empty {
  margin-top: 280rpx;
  text-align: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }
  .empty_text {
    font-size: 32rpx;
    color: #999;
  }

}
</style>
